<template>
    <div class="number-input-group">
        <el-row name="number-select" class="number-select" style="width: 100%;">
            <el-col class="number-select-select" :span="10" style="display: flex;" v-if="value[0].isShow !== false">
                <template v-if="value[0].type == 'select'">
                    <el-select v-model="emit_data[value[0].key]" :placeholder="value[0].placeholder"
                        @change="emitValue(true)">
                        <el-option v-for="opt in value[0].data" :key="opt.value" :label="opt.name"
                            :value="opt.value" />
                    </el-select>
                </template>
            </el-col>
            <el-col style="display: flex;justify-content: center; align-items: center;" class="number-select-inner"
                :span="value[0].isShow !==false?14:24">

                <template v-for="(item, index) in value.slice(1)">
                    <template v-if="item.type == 'select'">
                        <el-select v-model="emit_data[item.key]" :placeholder="item.placeholder" @change="emitValue(false)">
                            <el-option v-for="opt in item.data" :key="opt.value" :label="opt.name"
                                :value="opt.value" />
                        </el-select>
                    </template>

                       <template v-else-if="item.type === 'date'">
                        <el-date-picker
                        v-model="emit_data[item.key]"
                        type="date"
                        :placeholder="item.placeholder"
                        :format="item.format"
                        :value-format="item.valueFormat?item.valueFormat:'yyyy-MM-dd'"
                        @change="emitValue(false)"
                        style="width: 240px"
                        />
                    </template>
                    <template v-else>
                        <el-input v-model.trim="emit_data[item.key]" :placeholder="item.placeholder"
                            @change="emitValue(false)"></el-input>
                    </template>
                    <template v-if="item.use_between">
                        ~
                    </template>
                </template>
            </el-col>
        </el-row>
    </div>

</template>

<script>
export default {
    name:'cInputGroup',
    props: {
        value: {
            type: Array,
            default: () => (
                [
                    {
                        type: 'select', key: 'select', default: '', placeholder: '请选择', data: [{ label: '选项1', value: '1' },
                        { label: '选项2', value: '2' },
                        { label: '选项3', value: '3' }]
                    },
                    { type: 'input', key: 'value1', default: '', placeholder: '最小值', use_between: true },
                    { type: 'input', key: 'value2', default: '', placeholder: '最大值' },
                ]
            )
        },
        isRange: {
            type: Boolean,
            default: true
        },
        numberOnly: {
            type: Boolean,
            default: false
        }
    },

//     watch: {
//         value: {
//       handler: function () {

//         const initialEmitData = {};
//         // 初始化 emit_data 的每一项
//         (this.value || []).forEach(element => {
//             initialEmitData[element.key] = element.query !== undefined ? element.query : element.default;            
//         });
//         this.emit_data = initialEmitData
//     },
//       immediate: true,
//       deep: true
// }
//     },

    data() {
        const initialEmitData = {};
        // 初始化 emit_data 的每一项
        (this.value || []).forEach(element => {
            initialEmitData[element.key] = element.query !== undefined ? element.query : element.default;           
        });
        return {
            emit_data: initialEmitData
        };
    },
    methods: {
        emitValue(is_value_0 = false) {
            // 更新父组件
            if(is_value_0){
                if(this.value[0].default == this.emit_data[this.value[0].key]){
                    for (const element of this.value) {
                        this.emit_data[element.key] = element.default
                    }
                }

                if(this.value[0].type == 'select'){
                    let res = this.value[0].data.find(item=>item.value == this.emit_data[this.value[0].key])
                    if(res.replace_inner){
                        let find = this.value.find(item=>item.key == res.replace_inner.key)
                        if(find && res.inner_change && res.replace_inner.data.url){
                            this.$http(res.replace_inner.data.url.method, res.replace_inner.data.url.api).then(http_res => {
                            let data = []
                            for (const r of http_res.data) {
                                data.push({ value: r[res.replace_inner.data.url.map['key']], name: r[res.replace_inner.data.url.map['value']] })
                            }
                            this.$set(find, 'data', data)
                            })
                        }
                        else if(!res.replace_inner.data.url && res.inner_change) {
                            this.$set(find, 'data', [])
                        }
                        this.$set(this.emit_data, res.replace_inner.key, null)
                    }
                }
            }
            this.$emit('emitValue', this.emit_data);

            console.log("emit_data==>", this.value, this.emit_data);
        },
    }
}
</script>

<style lang="less">
.el-select {
    width: 100% !important;
}


.number-select {
    border: 1px solid #DCDFE6;
    border-radius: 4px;

    &-select {
        border-right: 1px solid #DCDFE6;
    }

    .el-input__inner {
        border: none !important;
    }

    .el-input {
        width: 100% !important;
        border: none !important;
    }

    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
}
</style>